<template>
  <div class="noticeHome">
    <div class="content_box_right_top">
      <div class="content_box_right_top_left">
        <span>
          公告首页
          <img
            src="../assets/images/content_x.png"
            class="content_box_right_top_left_img_x"
          />
        </span>
      </div>
      <div class="content_box_right_top_right">
        <span>
          标签选项
          <img
            src="../assets/images/heder_todown.png"
            class="content_box_right_top_right_img_down"
          />
        </span>
      </div>
    </div>
    <div>
      <hr />
    </div>
    <!-- 表格内容 -->
    <div class="content_box_right_content">
      <div class="content_box_right_content_title">
        <span>欢迎进入公告页</span>
      </div>
      <div class="content_box_right_content_message">
        <table width="100%">
          <thead>
            <tr>
              <th>公告</th>
            </tr>
          </thead>
          <tbody class="n_tbody">
            <tr v-for="(v, i) in arrMessageData" :key="i">
              <th>
                <div>
                  <p>{{ v.n_title }}</p>
                  <p class="table_p">{{ v.n_content }}</p>
                </div>
                <div>
                  <p class="table_p2">{{ v.n_time | formatTimer }}</p>
                </div>
              </th>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <!-- 页码 -->
    <el-pagination
      @current-change="h_changePage"
      background
      layout="prev, pager, next"
      :page-size="h_count"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      total: 0,
      h_page: 1,
      h_count: 5,
      arrMessageData: [
        // {
        //   title:"公告1",
        //   content:"维修信息一",
        //   dateTime:"2022-02-08 22:18:02"
        // },
      ],
    };
  },
  // 日期时间格式化过滤器
  filters: {
    formatTimer: function (time) {
      let date = new Date(time);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m;
    },
  },
  methods: {
    // 数据
    h_getData: function () {
      this.$axios({
        url: "n_getInfo",
        method: "get",
        params: {
          n_page: this.h_page,
          n_count: this.h_count,
        },
      }).then(({ data }) => {
        // console.log(data);
        if (data.error == 0) {
          this.arrMessageData = data.data;
          this.total = data.total;
        } else {
          this.$message.error("数据加载失败！");
        }
      });
    },
    // 页码
    h_changePage: function (page) {
      this.h_page = page;
      this.h_getData();
    },
  },
  mounted: function () {
    this.h_getData();
  },
};
</script>

<style scoped lang='less'>
.noticeHome {
  .content_box_right {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    margin-right: 20px;
    display: none;
  }
  .content_box_right_top {
    width: calc(100% - 30px);
    height: 50px;
    margin: 20px;
    border-radius: 10px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 2px 6px 5px rgb(212, 212, 212);
  }
  .content_box_right_top_left span {
    width: 100px;
    height: 20px;
    padding: 7px;
    background-color: #4985fb;
    margin-left: 10px;
    border-radius: 5px;
    color: #fff;
    font-size: 12px;
  }
  .content_box_right_top_left_img_x {
    position: relative;
    top: 2px;
    left: 2px;
  }
  .content_box_right_top_right span {
    width: 100px;
    height: 20px;
    padding: 7px;
    background-color: #4985fb;
    margin-right: 10px;
    border-radius: 5px;
    color: #fff;
    font-size: 12px;
  }
  .content_box_right_top_right_img_down {
    position: relative;
    top: -2px;
    left: 1px;
  }
  .content_box_right_content_title {
    font-size: 16px;
    width: 100%;
    height: 33px;
    line-height: 33px;
    vertical-align: middle;
    background-color: #fff;
    box-sizing: border-box;
    padding-left: 30px;
    font-weight: bold;
  }
  .content_box_right_content_message {
    width: calc(100% - 30px);
    margin: 20px;
    border-radius: 10px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 2px 6px 5px rgb(212, 212, 212);
  }
  div hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #000;
  }

  .el-pagination {
    text-align: center;
  }

  thead tr th {
    background-color: #f3f7f8;
    border-radius: 10px;
    height: 58px;
    text-align: left;
    vertical-align: middle;
    padding-left: 20px;
    font-weight: 1000;
  }
  tbody tr th {
    display: flex;
    justify-content: space-between;
    font-weight: normal;
    padding-left: 20px;
    height: 60px;
    text-align: left;
    font-size: 14px;
    p {
      font-weight: bold;
      color: #aaa;
    }
    .table_p {
      color: #ccc;
      font-weight: normal;
      margin-top: 10px;
    }
    .table_p2 {
      margin-right: 15px;
      color: #ccc;
      font-weight: normal;
      margin-top: 5px;
    }
  }
  tbody tr th:first-child {
    vertical-align: middle;
  }
}
</style>